<template>
  <view class="content1">
    <!-- <view style="background-color: white" class="r_tabs"> -->
    <u-sticky :bgColor="searchBk">
      <u-tabs
        @change="tabChange"
        :current="tabCurrent"
        :list="catelogData"
        :itemStyle="{
          minWidth: '20vw',
          height: '90rpx',
          flexWrap: 'nowrap',
        }"
        :inactiveStyle="{
          color: frontColor,
        }"
        :activeStyle="{
          fontWeight: '600',
          color: frontColor,
        }"
        :lineColor="frontColor"
        keyName="categoryName"
      ></u-tabs>
      <!-- </view> -->
    </u-sticky>

    <scroll-view
      @refresherrefresh="onPulling"
      style="height: 92%"
      class="dialogue-box"
      :scroll-top="scrollTopLocal"
      :refresher-enabled="true"
      :refresher-triggered="triggered"
      :scroll-y="true"
      @scrolltolower="scrolltolower"
    >
      <Product :data="goodsList" :needSort="true" @sort-change="sortChange" :showNoMore="goodsShowNoMore"></Product>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { nextTick, onBeforeMount, onMounted, reactive, ref, watch } from "vue";
import { getGoodsList, getCategoryList } from "@/utils/api";
import Product from "@/components/Product.vue";
import narbar from "@/components/narbar.vue";
import { onLoad, onPullDownRefresh, onReachBottom, onShow } from "@dcloudio/uni-app";

const tabCurrent = ref(1);
const goodsList = ref([]);
const navBarHeight = ref(90);
const scrollTop = ref(0);
const show = ref(false);

const catelogData = ref([]);
const listQuery = reactive({
  categoryId: 0,
  orderType: 0,
});

const searchBk = ref("");
const frontColor = ref("");

onBeforeMount(() => {
  getCategoryListFn();

  searchBk.value = uni.getStorageSync("backgroundColor");
  frontColor.value = uni.getStorageSync("color");
});

async function getCategoryListFn() {
  let par = {};

  const { code, data } = await getCategoryList({ ...par });

  if (code === 200) {
    let defItem = {
      id: 0,
      categoryName: "全部",
      index: 0,
    };
    catelogData.value.push(defItem);

    data.list.forEach((item) => {
      catelogData.value.push(item);
    });

    nextTick(() => {
      setTimeout(() => {
        tabCurrent.value = 0;
      }, 1000);
    });

    getGoodsListFn(0);
  }
}

const scrollTopLocal = ref();
function tabChange(item) {
  page.value = 1;
  listQuery.categoryId = item.id;
  goodsList.value = [];
  scrollTopLocal.value = 0;
  getGoodsListFn();
}

function sortChange(orderType) {
  listQuery.orderType = orderType;
  getGoodsListFn();
}

const page = ref(1);
// true：列表底部显示“上拉加载更多” false：显示“没有更多了”
const goodsShowNoMore = ref(false);
//获取商品列表
async function getGoodsListFn() {
  let par = {
    page: page.value,
    size: 5,
    categoryId: listQuery.categoryId,
    orderType: listQuery.orderType,
  };

  const { code, data } = await getGoodsList({ ...par });
  uni.stopPullDownRefresh({});

  triggered.value = false;
  if (code === 200) {
    // goodsList.value = data.list;
    if (page.value == 1) {
      goodsList.value = [];
    }

    goodsList.value.push(...data.list);

    if (data.list.length > 0) {
      goodsShowNoMore.value = false;
    } else {
      goodsShowNoMore.value = true;
    }
  }
}

// 商品列表触底
function scrolltolower() {
  page.value++;
  getGoodsListFn();
}

const triggered = ref(false);
// 下拉刷新
function onPulling() {
  triggered.value = true;
  page.value = 1;
  getGoodsListFn();
}
</script>

<style lang="scss" scoped>
.content1 {
  height: 100%;
  overflow: hidden;
}

.r_tabs {
  :deep(.u-tabs__wrapper__nav__line) {
    left: 0rpx;
  }
}
</style>
